<template>
  <div>
    <h3>菜单管理</h3>
    <el-form :model="query" ref="query" size="small" :inline="true">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
            v-model="query.menuName"
            placeholder="请输入菜单名称"
            clearable
            @keyup.enter.native="selectByMenuName"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="query.status" placeholder="请输入菜单状态" clearable>
          <el-option label="正常" value="0">正常</el-option>
          <el-option label="停用" value="1">停用</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="selectByMenuName">搜索</el-button>
        <el-button type="primary" @click="toAddForm">新增</el-button>
        <el-button type="primary" size="mini" @click="clearData">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            size="mini"
            @click="flowshow"
        >
          展开/折叠
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="selectByMenuName"></right-toolbar>
    </el-row>

    <el-table
        :default-expand-all="isExpandAll"
        v-if="refreshTable"
        :data="tableData"
        style="width: 100%"
        row-key="menuId"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="menuName"
          label="菜单名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="icon"
          label="图标"
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="排序"
          width="180">
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限标识"
          width="180">
      </el-table-column>
      <el-table-column
          prop="component"
          label="组件路径"
          width="180">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="180">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status==0">正常</el-tag>
          <el-tag v-if="scope.row.status==1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column
          prop="isFrame"
          label="是否外链接"
          width="180">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="updateForm(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteForm(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-cascader v-model="form.parentId"
                       :options=this.tableData
                       :props="{ expandTrigger:'click' ,checkStrictly: true,value:'menuId',label:'menuName',children:'children'}"
                       clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.menuType">
            <el-radio label="M" value="M">目录</el-radio>
            <el-radio label="C" value="C">菜单</el-radio>
            <el-radio label="F" value="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
<!--                <el-form-item label="是否外链">-->
<!--                  <el-radio-group v-model="form.isFrame">-->
<!--                    <el-radio value="0" label=0>是</el-radio>-->
<!--                    <el-radio value="1" label=1>否</el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->
                <el-form-item label="显示状态">
                  <el-radio-group v-model="form.visible">
                    <el-radio label="0" value="0">显示</el-radio>
                    <el-radio label="1" value="1">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
        <el-form-item label="菜单状态" autocomplete="off">
          <el-radio-group v-model="form.status">
            <el-radio label=0 value="0">正常</el-radio>
            <el-radio label=1 value="1">下线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示排序" autocomplete="off">
          <template>
            <el-input-number v-model="form.orderNum" controls-position="right" :min="1" :max="10"></el-input-number>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addorupdateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CarMenuView",
  data() {
    return {
      parentId: '',
      title: "",
      tableData: [],
      query: {
        menuName: "",
      },
      dialogFormVisible: false,
      form: {},
      refreshTable: true,
      isExpandAll: false,
      showSearch: true,
      loading: true,
      options: [],
      formLabelWidth: '120px',
      rids: [],
    }
  },
  methods: {
    // selectall(){
    //   this.axios.post("menu/list").then(r=>{
    //     this.options=r.data;
    //   })
    // },
    selectByMenuName() {
      this.loading = true;
      this.axios.post("http://localhost:8090/menu/menuList", this.query).then(r => {
        this.tableData = r.data;
      })
    },
    toAddForm() {
      this.title = "添加菜单"
      this.form = {},
          this.dialogFormVisible = true;
    },
    clearData() {
      this.query = {},
          this.selectByMenuName();
    },
    addorupdateForm() {
      this.axios.post("http://localhost:8090/menu/addorupdateForm",this.form).then((r) => {
        if (r.data.code == 200) {
          this.$message.success(r.data.msg);
          this.dialogFormVisible = false;
          this.selectByMenuName();
        } else {
          this.$message.error(r.data.msg);
        }
      })
    },
    updateForm(row) {
      this.title = "修改菜单";
      this.form = row;
      console.log(JSON.stringify(this.form.parentId))
      this.dialogFormVisible = true;
    },
    deleteForm(menuId) {
      this.axios.post("http://localhost:8090/menu/deleteForm?menuId=" + menuId).then((r) => {
        if (r.data.code == 200) {
          this.$message.success("删除成功!");
          this.selectByMenuName();
        } else {
          this.$message.error(r.data.msg);
        }
      })
    }, flowshow() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      })
    },
  },
  created() {
    this.selectByMenuName();
  }
}
</script>

<style scoped>

</style>
